<template>
  <div class="main">
    <Search />
    <Theme />
    <BookMark />
  </div>
</template>
<script setup lang="ts">
import Search from "./components/search/index.vue";
import Theme from "./components/theme/index.vue";
import BookMark from "./components/shortcut/index.vue";
</script>

<style scoped lang="scss">
@import "./style/function.scss";

.main {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  padding: size(xxxl);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("../assets/images/background.png");
  // [theme="light"] & {
  //   background-image: url("../assets/images/light-bg.png");
  // }

  // [theme="dark"] & {
  //   background-image: url("../assets/images/dark-bg.png");
  // }
}
</style>
